<template>
  <div>
    <div style="position: absolute;height:130px;overflow: hidden">
      <img src="../../../assets/images/index_bg.png" style="width: 100%;">
    </div>
    <div style="position: absolute;width: 95%;left:0;right:0;margin: auto;padding-top:20px;">
      <div class="info" @click="toInfo" v-if="isShow">
        <div class="info-img">
          <img :src="info.user.head_url?info.user.head_url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3705310863,2037219726&fm=26&gp=0.jpg'">
        </div>
        <div class="info-text">
          <h4>{{info.user.nick}}</h4>
          <p>姓名：{{info.user.user_name}}</p>
        </div>
      </div>
      <flexbox orient="vertical" style="padding-top:15px;">
        <flexbox-item><div class="flex-demo">
          <router-link to="/project0/view2/message" class="item-list">
            <span>
              <i class="iconfont icon-xiaoxi icon"></i>
              <span class="text">系统消息</span>
            </span>
            <i class="iconfont icon-xiayiye"></i>
          </router-link>
          <div class="item-list">
            <span>
              <i class="iconfont icon-kefuwangwang icon"></i>
              <span class="text">帮助与客服</span>
            </span>
            <i class="iconfont icon-xiayiye"></i>
          </div>
          <router-link to="/project0/view2/set" class="item-list">
            <span>
               <i class="iconfont icon-shezhi1 icon"></i>
              <span class="text">设置</span>
            </span>
            <i class="iconfont icon-xiayiye"></i>
          </router-link>
        </div></flexbox-item>
      </flexbox>
    </div>
  </div>
</template>

<script>
  import { Panel, Group, Cell, Grid, GridItem } from 'vux'
  export default {
    name: "Main",
    components: {
      Panel, Group, Cell, Grid, GridItem
    },
    created(){
      this.info = this.config0.globalInfo
      console.log(this.config0.globalInfo)
      this.isShow = true
    },
    methods: {
      // 个人资料
      toInfo(){
        // this.$router.push('/project1/view3/info')
      },
      // 查看订单
      getOrder(state){
        // this.$router.push({
        //   name: '/project1/view3/order',
        //   params: {
        //     state: state
        //   }
        // })
      }
    },
    data () {
      return {
        type: '1',
        info:{},
        isShow:false
      }
    },
  }
</script>

<style scoped lang="less">
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  *{
    font-family: 微软雅黑;
  }
  .info{
    height:50px;
    padding:0 0.5rem;
  .info-img{
    height:50px;
    width:50px;
    border-radius: 50%;
    border:3px #aeffeb solid;
    float: left;
    overflow: hidden;
  img{
    height:100%;
    width:100%;
  }
  }
  .info-text{
    float: left;
    width: 70%;
    color:#fff;
  h4{
    line-height:25px;
    padding-left: 1rem;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
  }
  p{
    line-height:25px;
    padding-left: 1rem;
    font-size:0.8rem;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
  }
  }
  }
  .flex-demo{
    background: #fff;
    border-radius: 5px;
    padding: 0.5rem;
    box-shadow: 0 0 10px #bbbbbd;
    margin-top:5px;
  .order{
    line-height:2rem;
    font-size:1rem;
  .more{
    font-weight: normal;
    color: #33bb99;
    font-size: 0.8rem;
    float: right;
  }
  }
  .order-list{
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding:0.5rem 0;
  .order-item{
    font-size: 0.8rem;
    text-align: center;
  .iconfont{
    color:#33bb99;
    font-size:1.8rem;
  }
  p{
    color:#000;
  }
  }
  }
  .item-list{
    font-size:1rem;
    display: flex;
    justify-content: space-between;
    line-height:2.5rem;
    color:#666;
  span{
  .iconfont.icon{
    color:#33bb99;
    font-size: 1.3rem;
    font-weight: 400;
  }
  .text{
    padding-left:0.5rem;
  }
  }
  }
  }

</style>
